<template>
  <div class="zl-attr-item">
    <template v-if="graphType === 'card'">
      <div class="right-row">
          <span class="r-tit">文本</span>
          <div class="r-cnt">
            <Input v-model="graphOptions.others.titleText"></Input>
          </div>
      </div>
      <div class="right-row">
        <span class="r-tit">位置</span>
        <div class="r-cnt">
            <RadioGroup v-model="graphOptions.others.titlePosition">
                <Radio label="top"><span>上</span></Radio>
                <Radio label="bottom"><span>下</span></Radio>
                <Radio label="left"><span>左</span></Radio>
                <Radio label="right"><span>右</span></Radio>
            </RadioGroup>
        </div>
      </div>
      <div class="right-row">
          <span class="r-tit">颜色</span>
          <div class="r-cnt">
            <ColorPicker v-model="graphOptions.others.titleColor"></ColorPicker>
          </div>
      </div>
      <div class="right-row">
          <span class="r-tit">大小</span>
          <div class="r-cnt">
            <Select v-model="graphOptions.others.titleSize">
              <Option :value="fontSize" :key="fontSize" v-for="fontSize in fontSizeArr">{{fontSize}}</Option>
            </Select>
          </div>
      </div>
    </template>
    <template v-else>
      <div class="right-row" >
        <span class="r-tit">标题</span>
        <div class="r-cnt">
            <Input clearable placeholder="标题" v-model="graphOptions.title.text"> </Input>
        </div>
      </div>
      <div class="right-row">
          <span class="r-tit">文字位置</span>
          <div class="r-cnt">
              <RadioGroup v-model="graphOptions.title.x">
                  <Radio label="left"><span>居左</span></Radio>
                  <Radio label="center"><span>居中</span></Radio>
                  <Radio label="right"><span>居右</span></Radio>
              </RadioGroup>
          </div>
      </div>
      <div class="right-row" v-if="graphType !== 'card'">
        <span class="r-tit">字体大小</span>
        <div class="r-cnt">
          <Select v-model="graphOptions.title.textStyle.fontSize">
              <Option :value="fontSize" :key="fontSize" v-for="fontSize in fontSizeArr">{{fontSize}}</Option>
            </Select>
        </div>
      </div>
      <div class="right-row" v-if="graphType !== 'card'">
        <span class="r-tit">颜色</span>
        <div class="r-cnt">
          <ColorPicker v-model="graphOptions.title.textStyle.color"></ColorPicker>
        </div>
      </div>
    </template>
  </div>
</template>
<script type="text/javascript">
export default {
  name: 'ZlTitle',
  data () {
    return {
      fontSizeArr: ['12', '14', '16', '18', '20', '24', '28', '32', '36', '40', '44', '48', '52', '56', '60'],
    }
  },
  props: {
    graphOptions:{
        type:Object,
        default:function(){
            return {};
        }
    },
    graphType:{
        type:String
    }
  }
}
</script>
<style rel="stylesheet/less" lang="less" scoped>
</style>
